import React, { Component } from "react";
import Todolist2ui from "./todolist2ui";
import "antd/dist/antd.css";
import store from "./store";
// import { CHANGEINPUTVALUE, CHANGELIST, LISTDELETE } from "./store/actiontypes";
import {
  getChangeList,
  getInputValue,
  getListDelete,
  getTodoList,
  getInitList
} from "./store/actionCreater";
class todolist2 extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleButton = this.handleButton.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.actionchange = this.actionchange.bind(this);
    this.actionlistchange = this.actionlistchange.bind(this);
    this.actiondelete = this.actiondelete.bind(this);
    this.initlistaction = this.initlistaction.bind(this)
    store.subscribe(this.actionchange);
    store.subscribe(this.actionlistchange);
    store.subscribe(this.actiondelete);
    store.subscribe(this.initlistaction);
  }
  render() {
    return (
      <Todolist2ui
        inputValue={this.state.inputValue}
        handleChange={this.handleChange}
        handleButton={this.handleButton}
        list={this.state.list}
        handleDelete={this.handleDelete}
      />
    );
  }
  componentDidMount() {
    const action = getInitList();


    //   使用redux-thunk后可让action接收异步函数
    // const action = getTodoList();
    // 当dispatch接收到的action是函数就会自动执行该函数
    store.dispatch(action);
  }
  handleChange(e) {
    const action = getInputValue(e.target.value);
    store.dispatch(action);
  }
  actionchange() {
    this.setState(store.getState());
  }
  handleButton(e) {
    const action = getChangeList();
    store.dispatch(action);
  }
  actionlistchange() {
    this.setState(store.getState());
  }
  handleDelete(index) {
    const action = getListDelete(index);
    store.dispatch(action);
    //   console.log(index)
  }
  actiondelete() {
    this.setState(store.getState());
  }
  initlistaction() {
    this.setState(store.getState());
  }
}

export default todolist2;
